<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-输入组件</title>
    <!--Vue必须放上面-->
    <script src="../js/vue.js"></script>
    <!--ElementUi-->
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!--以前的文本输入框VS现在的文本输入框-->
    用户名： <input type="text" name="username" placeholder="请输入用户名：" v-model="username">
    <hr>
    <!--
        el-input : 文本输入组件   块级组件
    -->
    用户名： <el-input type="text" name="username" placeholder="请输入用户名："></el-input>
    <hr>
    <!--
        prefix : 前缀        http:
        suffix : 后缀        .java
    -->
    <el-input prefix-icon="el-icon-user" type="text" name="username" placeholder="请输入用户名：" v-model="username"></el-input>
    <el-input suffix-icon="el-icon-user"  type="text" name="username" placeholder="请输入用户名：" v-model="username"></el-input>
    <el-input prefix-icon="el-icon-news" type="text" name="email" placeholder="请输入邮箱：" v-model="email"></el-input>
    <el-input prefix-icon="el-icon-news" type="text" name="email" placeholder="请输入邮箱：" v-model="email">
        <!--
            文字插槽：template
               slot="append" ： 插槽设置到输入框的位置
        -->
        <template slot="append">
            @qq.com
        </template>
    </el-input>

    <el-input prefix-icon="el-icon-location" type="text" name="href" placeholder="请输入网址：" v-model="href">
            <template slot="prepend">
                https://
            </template>

            <el-button type="primary" slot="append" @click="fun">跳转</el-button>
    </el-input>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            username:undefined,
            email:undefined,
            href:undefined,
        },
        methods: {
            fun:function () {
                window.location.href = "http://"+ this.href;
            }
        }
    });
</script>
</body>
</html>